<template>
    <div>
        <el-dialog title="账号管理" :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
            <div style="margin: 20px;"></div>
            <el-form :model="modelForm" ref="modelForm" label-width="100px" :rules="rules" class="demo-ruleForm" style="width:94%" >
              <!--<div style="margin-left:100px;">-->
              <!--<div class="text-left" style="color:red">注意事项：</div>-->
              <!--<div  style="font-size: 12px;color:#888;padding-top: 5px;" class="text-left">密码不输入，默认为123456</div>-->
              <!--<div  style="font-size: 12px;color:#888;margin-bottom: 10px;" class="text-left">密码建议6-16位，区分大小写，只能使用字母、数字、特殊字符。</div>-->
              <!--</div>-->
                <el-form-item  prop="account" :rules="[{ required: true, message: '用户账号不能为空', trigger: 'blur' }]">
                    <el-input type="text" v-model="modelForm.account" auto-complete="off" placeholder="请输入用户账号" size="medium"  :disabled="isEdit">
                        <template slot="prepend">
                            <el-tooltip placement="top" content="请输入用户账号">
                                <el-button tabIndex="-1">用户账号</el-button>
                            </el-tooltip>
                        </template>
                    </el-input>
                </el-form-item>
                <input type="text" hidden>
                <input type="password" hidden>
<!--                { validator: validatePass, trigger: 'blur'}-->
                <el-form-item  prop="password" :rules="[{ validator: validatePass, trigger: 'blur' }]">
                    <el-input type="password"  v-model="modelForm.password" auto-complete="off" :placeholder="isEdit!=true?'请再次输入登录密码':'如不修改密码，则可以不填写'" size="medium">
                        <template slot="prepend">
                            <el-tooltip placement="top" content="若不需修改，则默认为123456">
                                <el-button tabIndex="-1">登录密码</el-button>
                            </el-tooltip>
                        </template>
                    </el-input>


                </el-form-item>
                <el-form-item  prop="passwordConfirm"    :rules="[{validator: validatePass2, trigger: 'blur' }]">
                    <el-input type="password"  v-model="modelForm.passwordConfirm" auto-complete="off" :placeholder="isEdit!=true?'请再次输入登录密码':'如不修改密码，则可以不填写'" size="medium">
                        <template slot="prepend">
                            <el-tooltip placement="top" content="请再次输入登录密码">
                                <el-button tabIndex="-1">登录密码</el-button>
                            </el-tooltip>
                        </template>
                    </el-input>

                </el-form-item>
              <el-form-item  prop="ganwei"    :rules="[]">
                <div class="el-input el-input-group el-input-group--prepend">
                  <div class="el-input-group__prepend">角色</div>
                  <div style="border:1px solid #ccc;line-height: 30px;padding:0px 10px;min-height: 30px;" class="text-left">
                    <el-checkbox-group v-model="modelForm.ganwei">
                      <el-checkbox :label="i.id"  :key="i.id" v-for="i in ganweiList" :value="i.id">{{i.name}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <div class="foot-bar-button">
                <el-button type="primary" size="medium" @click="submitForm('modelForm')">提交</el-button>
                <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    //注意路径

    export default{
        props: ['isShow','id',"isEdit"],  //参数
        data(){
            return {
                modelForm: {
                  ganwei:[],
                  account:"",
                  password:"",
                  passwordConfirm:""
                },
                 resetPass:"",
                 password:"",
                 showDialog:false,
                 activityId:"",
                 isSave:true,
                 isSet:true,
              ganweiList:[]

            };
        },

        watch:{
            isShow:function(newValue,oldValue){
                this.showDialog=newValue;
                if(this.id!=''){
                    this.activityId=this.id;
                    this.isSave=false;
                    if(this.isEdit){    //编辑
                      this.$axios.get("organization/employees/allocationAccount?employeeId="+this.id).then(res=>{
                        if(res.success){
                          for(var i=0;i<res.content.positions.length;i++){
                            res.content.positions[i].isShow=false;
                          }
                          this.ganweiList=res.content.positions;
                          this.modelForm.id=res.content.account.id;
                          this.modelForm.account=res.content.account.account;
                          this.modelForm.ganwei=res.content.roles;


                        }
                      },res=>{})
                    }else{    //新建
                      this.$axios.get("organization/employees/allocationAccount?employeeId="+this.id).then(res=>{
                        if(res.success){
                          this.modelForm={
                            ganwei:[],
                              account:"",
                              password:"",
                              passwordConfirm:""
                          };
                          for(var i=0;i<res.content.positions.length;i++){
                            res.content.positions[i].isShow=false;
                          }
                          this.ganweiList=res.content.positions;
                        }
                      },res=>{})
                    }

                }else{
                }
            }
        },
        created(){
            window.this = this;

        },
        methods: {
            goBack() {
                this.router.go(-1);
            },
             validatePass (rule, value, callback) {

                 if(!this.isEdit){
                   if (value === '') {
                   callback(new Error('请输入密码'));
                 }

               }
                /* else {
                    if (this.modelForm.password !== '') {
                        this.$refs.modelForm.validateField('password');

                    }
                }*/
                callback();

            },
             validatePass2 (rule, value, callback)  {
              if(!this.isEdit){
                if (value === '') {
                  callback(new Error('请再次输入密码'));
                }
              }
               if (value !== this.modelForm.password ) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                            this.$axios.post("organization/employees/allocationAccount",{employeeId:this.activityId,id:this.modelForm.id,account:this.modelForm.account,password:this.modelForm.password,passwordConfirm:this.modelForm.passwordConfirm,gangwei:JSON.stringify(this.modelForm.ganwei)},"json").then(data=>{
                                if(data.status==200){
                                    this.$message({
                                        message:data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                }else{
                                    this.$message.error(data.message);
                                }
                            });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$emit('close');
                this.$refs[formName].resetFields();
                this.showDialog=false;
            },
            handleClose(done){
                this.$emit('close');
                done();
            }
        }
    }
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
